<template>
  <div class="Record">
    <div class="app-container-main">
      <div class="Top">
        <p>简历投递记录</p>
      </div>
      <div class="Search">
        <a-input-group compact class="InputGroup">
          <a-select v-model:value="searchMethod" style="width: 120px">
            <a-select-option value="0">公司名称</a-select-option>
            <a-select-option value="1">公司ID</a-select-option>
            <a-select-option value="2">职位名称</a-select-option>
            <a-select-option value="3">职位ID</a-select-option>
            <a-select-option value="4">求职者姓名ID</a-select-option>
          </a-select>
          <a-input-search
            v-model:value="searchValue"
            @search="onSearch"
            placeholder="请输入搜索内容"
            style="width: 330px"
          >
            <template #enterButton>
              <a-button style="background: #f5f7fa"
                ><template #icon>
                  <SearchOutlined style="color: #b8bcbd" /> </template
              ></a-button>
            </template>
          </a-input-search>
        </a-input-group>
      </div>
      <div class="Table">
        <a-table :data-source="data" style="width: 98%; margin: 0 auto; margin-top: 15px" :pagination="false">
          <a-table-column key="name" title="求职者姓名" data-index="name">
            <template #default="{ record }">
              <a>{{record.name}}</a>
            </template>
          </a-table-column>
          <a-table-column key="message" title="基本信息" data-index="message" />
          <a-table-column key="zwname" title="职位名称" data-index="zwname">
            <template #default="{ record }">
              <a>{{record.zwname}}</a>
            </template>
          </a-table-column>
          <a-table-column key="companyname" title="企业名称" data-index="companyname">
            <template #default="{ record }">
              <a>{{record.companyname}}</a>
            </template>
          </a-table-column>
          <a-table-column key="tdtime" title="投递时间" data-index="tdtime">
            <template #default="{ record }">
              <span>
                <img src="../../imgs/3.1 时间.png" alt="" style="width:18px;margin-top:-3px;">
                <span>{{record.tdtime}}</span>
              </span>
            </template>
          </a-table-column>
          <a-table-column title="是否已查看">
            <template #default="{ record }">
                <a-tag color="blue" v-if="record.lookstatus" style="height:35px;line-height: 35px;border-radius: 5px;">已查看</a-tag>
                <a-tag color="orange" v-else style="height:35px;line-height: 35px;border-radius: 5px;">未查看</a-tag>
            </template>
          </a-table-column>
          <a-table-column title="处理状态">
            <template #default="{ record }">
                <a-tag color="blue" v-if="record.chulistatu" style="height:35px;line-height: 35px;border-radius: 5px;">已同意</a-tag>
                <a-tag color="orange" v-else style="height:35px;line-height: 35px;border-radius: 5px;">待处理</a-tag>
            </template>
          </a-table-column>
          <a-table-column title="投递方式">
            <template #default="{ record }">
                <a-tag color="blue" v-if="record.tdmethod" style="height:35px;line-height: 35px;border-radius: 5px;">自主投递</a-tag>
                <a-tag color="darkgrey" v-else style="height:35px;line-height: 35px;border-radius: 5px;">委托投递</a-tag>
            </template>
          </a-table-column>
          <a-table-column key="origin" title="来源" data-index="origin" >
            <template #default="{ record }">
              <span>
                {{record.origin}}
              </span>
            </template>
          </a-table-column>
        </a-table>
      </div>
      <div class="Pagination">
        <a-pagination
          v-model:current="current2"
          show-quick-jumper
          :total="data.length"
          :show-total="(total:any) => `Total ${total} items`"
          @change="onChange1"
          style="float:right;margin-right: 2%;margin-top: 15px;"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import { SearchOutlined } from "@ant-design/icons-vue";

export default defineComponent ({
  name:"ResumeRecord",
  components: {
    SearchOutlined,
  },
  setup(){
    const searchMethod = ref("0")
    const searchValue = ref("")
    const current2 = ref(1);
    const data = [
      {
        id:"1",
        name:"sss",
        message:"1岁 / 男 / 中技 / 1年",
        zwname:"设计师",
        companyname:"太原迅易科技有限公司",
        tdtime:"2021-08-01 17:21",
        lookstatus:true,
        chulistatu:true,
        tdmethod:false,
        origin:"电脑浏览器"
      },
      {
        id:"2",
        name:"小王",
        message:"31岁 / 女 / 本科 / 8年",
        zwname:"测试测试",
        companyname:"测试666",
        tdtime:"2021-08-01 17:21",
        lookstatus:false,
        chulistatu:false,
        tdmethod:true,
        origin:"电脑浏览器"
      },
    ]
    const onSearch = () => {

    }
    const onChange1 = (number: any) => {
      console.log("Page: ", number);
    };
    return{
      searchMethod,
      searchValue,
      onSearch,
      data,
      current2,
      onChange1
    }
  }
})
</script>

<style lang="scss">
.Record {
  width: 98%;
  margin: 0 auto;
  margin-top: 20px;
  padding-bottom: 15px;
  .app-container-main {
    padding-bottom: 15px;
    .Top {
      width: 100%;
      height: 55px;
      line-height: 55px;
      border-bottom: 1px solid #ebeef5;
      p {
        font-size: 16px;
        margin-left: 1%;
      }
    }
    .Search{
      width: 100%;
      height: 40px;
      margin-top: 15px;
      .ant-btn-icon-only {
          width: 60px;
          height: 40px;
          line-height: 40px;
        }
        .ant-input {
          height: 40px;
          line-height: 40px;
        }
        .ant-select-single .ant-select-selector,
        .ant-select-single .ant-select-selection-item,
        .ant-select-selection-search-input {
          height: 40px;
          line-height: 40px;
          color: #6b6b6b;
        }
        .InputGroup {
          width: 450px;
          float: right;
          margin-right: 20px;
        }
    }
    .Pagination{
      height: 50px;
    }
  }
}
</style>